<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
    <style>
        .col,.col2 {
            width:50%;
            vertical-align:top;
        }
        .gridhello {
            border-collapse : collapse;
        }
        .gridhellocolumn {
            padding-left : 0;
        }
        .pic{
            margin-bottom: -4px;
            margin-right: 2px;
            border:none;
        }
        .top {
            vertical-align: top;

        }
        .info {
            height: 202px;
            overflow: auto;
        }

        .pictop{
            vertical-align:top;
        }
        .picpbody{
            padding:0px;
            height:120px;
            width:150px;
            overflow:auto;
        }
        .docType {
            height: 130px;
            width:200px;
            overflow: auto;
        }
    </style>

    <rich:panel header="文件上传" styleClass="content-hight">
        <h:form>
            <h:panelGrid columnClasses="col1,col2">
                <rich:tree render="choiceTypeInfo,upload"
                           selectionType="ajax" toggleType="client"
                           value="#{documentType.treeNode}"
                           selectionChangeListener="#{documentType.selectedDocumentType}"
                           var="idocumentType">
                    <rich:treeNode>
                        <h:outputText value="[#{idocumentType.data.id}]#{idocumentType.data.name}" />
                    </rich:treeNode>
                </rich:tree>
                <h:outputLabel style="color:red"
                               id="choiceTypeInfo"
                               value="你选择的要上传文件类型是：#{documentType.documentType.id}#{documentType.documentType.name}" />
            </h:panelGrid>

            <rich:message/>
            <h:panelGrid columns="2" columnClasses="top,top">
                <rich:fileUpload fileUploadListener="#{fileUpload.listener}"
                                 maxFilesQuantity="1"
                                 disabled="#{empty documentType.documentType.id}"
                                 serverErrorLabel="上传失败"
                                 sizeExceededLabel="文件太大，无法上传"
                                 clearAllLabel="全部清空"
                                 clearLabel="清空"
                                 addLabel="添加"
                                 doneLabel="完成"
                                 uploadLabel="上传"
                                 deleteLabel="删除"
                                 id="upload">
                    <a4j:ajax event="uploadcomplete" render="info,errmessage" />
                </rich:fileUpload>
                <h:panelGroup id="info">
                    <rich:panel bodyClass="info">
                        <f:facet name="header">
                            <h:outputText value="上传成功后的文件信息" />
                        </f:facet>
                        <h:outputText value="当前并未上传.."
                                      rendered="#{fileUpload.size==0}" />
                        <rich:dataGrid columns="1" value="#{fileUpload.files}"
                                       var="file" rowKeyVar="row">
                            <rich:panel bodyClass="rich-laguna-panel-no-header">
                                <h:panelGrid columns="2">
                                    
                                    <h:panelGrid columns="2">
                                        <h:outputText value="文件名:" />
                                        <h:outputText value="#{file.name}" />
                                        <h:outputText value="文件大小(bytes):" />
                                        <h:outputText value="#{file.length}" />
                                    </h:panelGrid>
                                </h:panelGrid>
                            </rich:panel>
                        </rich:dataGrid>
                    </rich:panel>
                    <br/>
                    <a4j:commandButton action="#{fileUpload.clearUploadData}"
                                       render="info, upload" value="清除上传的文件信息"
                                       rendered="#{fileUpload.size>0}" />
                </h:panelGroup>
            </h:panelGrid>
        </h:form>

        <br/>
    </rich:panel>

</ui:composition>
